import { Table, Button, Card, Space, Tag, message, Progress } from 'antd';
import { SyncOutlined, CloudDownloadOutlined, PoweroffOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { useState } from 'react';

const DeviceManagement = () => {
  const [devices, setDevices] = useState([
    { 
      id: 1, 
      name: '血糖仪-001', 
      type: '血糖仪', 
      status: 'online', 
      ip: '192.168.1.101', 
      firmware: 'v2.1.5',
      battery: 85,
      lastSeen: '2025-10-31 09:30'
    },
    { 
      id: 2, 
      name: '血压计-002', 
      type: '血压计', 
      status: 'online', 
      ip: '192.168.1.102', 
      firmware: 'v1.8.3',
      battery: 60,
      lastSeen: '2025-10-31 09:25'
    },
    { 
      id: 3, 
      name: '体重秤-003', 
      type: '体重秤', 
      status: 'offline', 
      ip: '192.168.1.103', 
      firmware: 'v1.2.7',
      battery: 0,
      lastSeen: '2025-10-30 16:45'
    },
    { 
      id: 4, 
      name: '心电图-004', 
      type: '心电图仪', 
      status: 'online', 
      ip: '192.168.1.104', 
      firmware: 'v3.0.1',
      battery: 95,
      lastSeen: '2025-10-31 09:40'
    },
  ]);

  const columns = [
    { title: '设备名称', dataIndex: 'name' },
    { title: '类型', dataIndex: 'type' },
    { 
      title: '状态', 
      dataIndex: 'status',
      render: (status) => (
        <Tag icon={status === 'online' ? <CheckCircleOutlined /> : <PoweroffOutlined />} 
             color={status === 'online' ? 'success' : 'error'}>
          {status === 'online' ? '在线' : '离线'}
        </Tag>
      )
    },
    { title: 'IP地址', dataIndex: 'ip' },
    { title: '固件版本', dataIndex: 'firmware' },
    { 
      title: '电量', 
      dataIndex: 'battery',
      render: (battery, record) => (
        record.status === 'online' ? 
        <Progress percent={battery} size="small" status={battery > 20 ? 'normal' : 'exception'} /> :
        'N/A'
      )
    },
    { title: '最后在线', dataIndex: 'lastSeen' },
    {
      title: '操作',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            size="small" 
            icon={<SyncOutlined />}
            onClick={() => handleConnect(record.id)}
            disabled={record.status === 'online'}
          >
            连接
          </Button>
          <Button 
            type="link" 
            size="small" 
            icon={<CloudDownloadOutlined />}
            onClick={() => handleUpgrade(record.id)}
            disabled={record.status !== 'online'}
          >
            升级
          </Button>
        </Space>
      ),
    },
  ];

  const handleConnect = (id) => {
    message.info(`正在连接设备 ${id}`);
    // 模拟连接操作
    setTimeout(() => {
      setDevices(devices.map(device => 
        device.id === id ? { ...device, status: 'online', lastSeen: new Date().toLocaleString() } : device
      ));
      message.success('设备连接成功');
    }, 1000);
  };

  const handleUpgrade = (id) => {
    message.info(`开始升级设备 ${id}`);
    // 模拟升级操作
    setTimeout(() => {
      message.success('设备升级成功');
    }, 2000);
  };

  const handleRefresh = () => {
    message.info('刷新设备列表');
    // 模拟刷新操作
  };

  return (
    <div>
      <h2>设备管理</h2>
      
      {/* 操作栏 */}
      <Card style={{ marginBottom: 24 }}>
        <Space>
          <Button type="primary" icon={<SyncOutlined />} onClick={handleRefresh}>
            刷新设备列表
          </Button>
          <Button icon={<CloudDownloadOutlined />}>批量升级</Button>
        </Space>
      </Card>

      {/* 设备统计 */}
      <Card style={{ marginBottom: 24 }}>
        <Space size="large">
          <div>
            <div className="kpi-label">总设备数</div>
            <div className="kpi-value">12</div>
          </div>
          <div>
            <div className="kpi-label">在线设备</div>
            <div className="kpi-value" style={{ color: '#52c41a' }}>9</div>
          </div>
          <div>
            <div className="kpi-label">离线设备</div>
            <div className="kpi-value" style={{ color: '#f5222d' }}>3</div>
          </div>
          <div>
            <div className="kpi-label">待升级</div>
            <div className="kpi-value" style={{ color: '#faad14' }}>2</div>
          </div>
        </Space>
      </Card>

      {/* 设备列表 */}
      <Card title="设备列表">
        <Table 
          dataSource={devices} 
          columns={columns} 
          rowKey="id" 
          pagination={{ pageSize: 10 }}
        />
      </Card>
    </div>
  );
};

export default DeviceManagement;
